<template>
    <div v-fullpage:myFullpage="options">
        <!-- 第一屏,品牌说 -->
        <div
            class="section"
            data-header="dark"
            :style="{
                backgroundImage:
                    'url(//cdn.zsdx.cn/zsdx-website/2020/images/index/resolve.png)',
                opacity: firstShow ? 1 : 0
            }"
        >
            <div class="section-inner brands-wrap">
                <div class="section-title">
                    <span>校园品牌说</span>
                    <div class="section-title-bar"></div>
                </div>
                <brand-show></brand-show>
                <btn-join title="抢先一步,开通校园事业部" />
            </div>
        </div>
        <!-- 第一屏end -->
        <!-- 第二屏,品牌说 -->
        <div
            class="section"
            data-header="dark"
            :style="{
                backgroundImage:
                    'url(//cdn.zsdx.cn/zsdx-website/2020/images/index/resolve.png)',
                opacity: firstShow ? 1 : 0
            }"
        >
            <div class="section-inner brands-wrap">
                <brand-records></brand-records>
            </div>
        </div>
        <!-- 第二屏end -->
        <!-- 第三屏品牌商家入驻 -->
        <div
            class="section"
            data-header="default"
            :style="{
                opacity: firstShow ? 1 : 0
            }"
        >
            <div
                class="section-inner company-wrap hide"
                :class="[{ turnUp: moduleShow.company }]"
            >
                <div class="company-title">
                    <div class="company-title-number">1500+</div>
                    <div class="company-title-text">家品牌、商家入驻</div>
                </div>
                <company></company>
                <btn-join title="抢先一步,开通校园事业部" />
            </div>
        </div>
        <!-- 第三屏end -->
    </div>
</template>

<script>
import brandShow from '@/components/brands/brand-show'
import brandRecords from '@/components/brands/brand-records'
import company from '@/components/brands/company'
import checkReg from '@/assets/js/mixin/checkReg'
import btnJoin from '@/components/common/btn-join'
export default {
    components: { brandShow, brandRecords, company, btnJoin },
    mixins: [checkReg],
    data() {
        return {
            firstShow: false,
            moduleShow: {
                index: false,
                record: false,
                company: false
            },
            options: {
                licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
                navigation: false,
                scrollBar: false,
                scrollOverflow: true,
                paddingTop: '70px',
                anchors: ['index', 'record', 'company'],
                css3: true,
                controlArrows: false,
                afterLoad: this.afterLoad,
                onLeave: this.onLeave,
                afterResize(...args) {
                    // console.log('resize', args)
                }
            }
        }
    },
    created() {
        if (!process.server) {
            this.$store.commit('header/setStyle', 'dark')
        }
    },
    mounted() {
        this.firstShow = true
    },
    methods: {
        fnGoReg() {},
        onLeave(from, to, direction) {
            this.firstShow = true
            if (to.item.dataset.header == 'dark') {
                this.$store.commit('header/setStyle', 'dark')
            } else {
                this.$store.commit('header/setStyle', 'default')
            }
        },
        afterLoad(from, to, direction) {
            this.firstShow = true
            this.moduleShow[to.anchor] = true
        }
    }
}
</script>

<style lang="less" scoped>
.section {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity linear 0.2s;
    background-color: #fff;
}
@keyframes turnUp {
    0% {
        transform: translateY(500px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes turnDown {
    0% {
        transform: translateY(-500px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.hide {
    opacity: 0;
}
.turnUp {
    animation: turnUp 0.6s ease-out;
    opacity: 1;
}
.turnDown {
    animation: turnDown 0.6s ease-out;
    opacity: 1;
}
.section-title {
    height: 0.5rem;
    font-size: 0.38rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    line-height: 0.38rem;
    position: relative;
    display: inline-block;
    &-bar {
        width: 1.4rem;
        height: 0.04rem;
        background: rgba(207, 152, 0, 1);
        border-radius: 2px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}
.brands-wrap,
.company-wrap {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.company-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.4rem;
    font-weight: 600;
    color: rgba(96, 105, 114, 1);
    line-height: 0.4rem;
    margin-top: 0.4rem;
    &-number {
        color: #fe6600;
        margin-right: 10px;
    }
}
</style>
